<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="addClickHandler">添加</el-button>

    <el-form :inline="true" :model="query" ref="queryForm"
             style="border-top:1px solid #dcdfe6;border-radius:2px;padding-top:20px;">
      <el-form-item label="院线编码：" prop="tenantCode">
        <el-input v-model="query.tenantCode" placeholder="请输入院线编码" maxlength="6" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="院线名称：" prop="tenantName">
        <el-input v-model="query.tenantName" placeholder="请输入院线名称" maxlength="60" show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="queryClickHandler">查 询</el-button>
        <el-button icon="el-icon-brush" @click="clearClickHandler">清 空</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="tenantId" label="院线ID" width="80px"/>
      <el-table-column prop="tenantCode" label="院线编码" width="200px"/>
      <el-table-column prop="tenantName" label="院线名称" width="350px"/>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit"
                     @click.native.prevent="editClickHandler(scope.row)">编辑
          </el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleteClickHandler(scope.$index, scope.row)"
                         style="margin-left: 10px;">
            <el-button type="danger" size="mini" icon="el-icon-delete" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="total, prev, pager, next" style="padding-top: 10px;"
                   @current-change="currentPageChangeHandler"
                   :page-size="query.pageSize" :current-page="query.pageNumber" :total="query.total"/>

    <el-dialog title="提示" :visible.sync="isEditing" width="50%">
      <el-form :inline="true" :model="tenantEdit" ref="tenantForm" :rules="rules">
        <el-form-item label="院线编码：" prop="tenantCode">
          <el-input v-model="tenantEdit.tenantCode" placeholder="请输入院线编码" maxlength="6" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="院线名称：" prop="tenantName">
          <el-input v-model="tenantEdit.tenantName" placeholder="请输入院线名称" maxlength="60" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditing = false">取消</el-button>
        <el-button type="primary" @click="saveClickHandler">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $api from '@/api/api-tenant'

export default {
  name: "Tenant",
  data() {
    const checkTenantCode = (rule, value, callback) => {
      if (value === '000000') {
        callback(new Error('院线编码不能为000000'));
      } else {
        callback();
      }
    };
    return {
      activeNames: ['1'],
      query: {
        tenantCode: '',
        tenantName: '',
        total: 0,
        pageSize: this.$store.state.pageSize,
        pageNumber: 1
      },
      tableData: [],
      isEditing: false,
      tenantEdit: {
        tenantId: 0,
        tenantCode: '',
        tenantName: ''
      },
      rules: {
        tenantCode: [
          {required: true, message: '请输入院线编码', trigger: 'blur'},
          {validator: checkTenantCode, trigger: 'blur'}
        ],
        tenantName: [
          {required: true, message: '请输入院线名称', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.queryClickHandler();
  },
  methods: {
    queryPageData() {
      $api.page(this.query).then(page => {
        this.tableData = page.records;
        this.query.total = page.total;
      });
    },
    currentPageChangeHandler(num) {
      this.query.pageNumber = num;
      this.queryPageData();
    },
    queryClickHandler() {
      this.query.total = 0;
      this.query.pageNumber = 1;
      this.queryPageData();
    },
    clearClickHandler() {
      this.$refs['queryForm'].resetFields();
    },
    addClickHandler() {
      this.tenantEdit.tenantId = 0;
      this.tenantEdit.tenantCode = '';
      this.tenantEdit.tenantName = '';
      this.isEditing = true;
    },
    saveClickHandler() {
      this.$refs['tenantForm'].validate().then(() => {
        return $api.save(this.tenantEdit);
      }).then(() => {
        if (this.tenantEdit.tenantId > 0) {
          this.queryPageData();
        } else {
          this.queryClickHandler();
        }
        this.isEditing = false;
      });
    },
    editClickHandler(row) {
      this.tenantEdit.tenantId = row.tenantId;
      this.tenantEdit.tenantCode = row.tenantCode;
      this.tenantEdit.tenantName = row.tenantName;
      this.isEditing = true;
    },
    deleteClickHandler(index, row) {
      $api.del(row.tenantId).then(() => {
        if (this.tableData.length <= 1) {
          this.query.pageNumber--;
        }
        this.queryPageData();
      });
    }
  }
}
</script>

<style scoped>

</style>
